import 'package:flutter/material.dart';

void main() {
  runApp(ScrollableDemoApp());
}

class ScrollableDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '可滚动组件演示',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ScrollableDemoHome(),
    );
  }
}

class ScrollableDemoHome extends StatelessWidget {
  // 生成列表项数据
  List<Map<String, String>> _getListData() {
    List<Map<String, String>> data = [];
    for (int i = 1; i <= 20; i++) {
      data.add({
        'title': '列表项 $i',
        'desc': '这是第 $i 个可滚动列表项的描述内容，用于演示滚动效果。',
      });
    }
    return data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第六章 可滚动组件示例')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 标题区域（省略部分代码，与原示例一致）
            Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(8),
              ),
              child: Text(
                '可滚动组件综合演示',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue[800],
                ),
                textAlign: TextAlign.center,
              ),
            ),

            // 省略中间代码（与原示例一致）

            // 知识点2：SingleChildScrollView单子项滚动
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  ListTile(
                    title: Text(' SingleChildScrollView - 单子项滚动',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold)),
                    subtitle: Text('演示在有限空间内滚动大内容的场景'),
                  ),

                  // 示例：SingleChildScrollView包裹大内容
                  SizedBox(
                    height: 250, // 限制容器高度，使内容可滚动
                    child: SingleChildScrollView(
                      scrollDirection: Axis.vertical, // 垂直滚动
                      padding: EdgeInsets.all(16),
                      child: Column(
                        children: [
                          // 模拟大图片（用颜色容器代替）
                          Container(
                            width: double.infinity,
                            height: 200,
                            color: Colors.grey[200],
                            child: Center(
                              child: Text('模拟大图片区域',
                                  style: TextStyle(
                                      fontSize: 16, color: Colors.grey[600])),
                            ),
                          ),
                          // 省略后续代码（与原示例一致）
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

